<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>巷道信息管理</title>
	<meta name="decorator" content="default"/>
	<%-- <link href="${ctxStatic}/bootstrap/base/bootstrap.min.css" rel="stylesheet" /> --%>
	<style>
		#addPointMod{
			display: none;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			
		});
		function addHole(id){
			$("#addHoleMod .control-group input.input-xlarge").val("");
			$("#addHoleMod .control-group textarea.input-xlarge").val("");
			$("#roadwayId").val(id);
		}
		function saveHole(){
			var holeVal = {};
			$("#addHoleMod .control-group .input-xlarge").each(function(){
				holeVal[$(this).attr("id")] = $(this).val();
			});
			if(holeVal.name == "" || holeVal.length=="" || holeVal.position=="" || holeVal.direction==null || holeVal.displacement=="" || holeVal.angle ==""){
				alert("红色*号为必填项，请检查后提交");
				return
			}

			$.ajax({
				url: "${ctx}/mine/hole/saveHole",
				data: holeVal,
				 type: "POST",  
				contentType:"application/x-www-form-urlencoded; charset=utf-8",
				success: function(data){
					data = JSON.parse(data);
					if(data.error != undefined)
					{
						alert(data.error)
					}else{
						$('#addHoleMod').modal('hide');
						alert(data.success);
					}
				}
			}) 
		}
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/mine/roadway/">巷道信息列表</a></li>
		<shiro:hasPermission name="mine:roadway:edit"><li><a href="${ctx}/mine/roadway/form">巷道信息添加</a></li></shiro:hasPermission>
	</ul>
	<form:form id="searchForm" modelAttribute="roadway" action="${ctx}/mine/roadway/" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<ul class="ul-form">
			<li><label>巷道名：</label>
				<form:input path="roadname" htmlEscape="false" maxlength="255" class="input-medium"/>
			</li>
			<li><label>巷道深度：</label>
				<form:input path="depth" htmlEscape="false" class="input-medium"/>
			</li>
			<li><label>巷道长度：</label>
				<form:input path="length" htmlEscape="false" class="input-medium"/>
			</li>
			<%-- <li><label>矿井id：</label>
				<form:input path="mineId" htmlEscape="false" maxlength="64" class="input-medium"/>
			</li> --%>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
			<li class="clearfix"></li>
		</ul>
	</form:form>
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>巷道名</th>
				<th>巷道深度</th>
				<th>巷道长度</th>
				<!-- <th>矿井id</th> 
				<th>更新时间</th>-->
				<th>备注信息</th>
				<shiro:hasPermission name="mine:roadway:edit"><th>操作</th></shiro:hasPermission>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="roadway">
			<tr>
			<td><a href="${ctx}/mine/roadway/form?id=${roadway.id}">
					${roadway.roadname}
				</a></td>
				<td>
					${roadway.depth}
				</td>
				<td>
					${roadway.length}
				</td>
			<%-- 	<td>
					${roadway.mineId}
				</td> 
				<td>
					<fmt:formatDate value="${roadway.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
				</td>--%>
				<td>
					${roadway.remarks}
				</td>
				<shiro:hasPermission name="mine:roadway:edit"><td>
					<a href="${ctx}/mine/threeView/getRoadwayInfoById?id=${roadway.id}">进入巷道</a>
					<a href="${ctx}/mine/threeView/godPerspective?id=${roadway.id}">三维场景</a>
					<a data-toggle="modal" data-target="#addHoleMod" onclick="addHole('${roadway.id}')" style="cursor: pointer;">新增采集孔</a>
    				<a href="${ctx}/mine/roadway/form?id=${roadway.id}">修改</a>
					<a href="${ctx}/mine/roadway/delete?id=${roadway.id}" onclick="return confirmx('确认要删除该巷道信息吗？', this.href)">删除</a>
				</td></shiro:hasPermission>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
	
	<!-- 采集点添加模态框 -->
	<div class="modal fade" id="addHoleMod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="display:none">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">采集孔信息添加</h4>
	            </div>
	            <div class="modal-body">
	            	<form action="${ctx}/mine/point/save" method="post" class="form-horizontal" >
						<div class="control-group">
							<label class="control-label">采集孔名称：</label>
							<div class="controls">
								<input id="name"  type="text" maxlength="255" class="input-xlarge required" autocomplete="off"/>
								<span class="help-inline"><font color="red">*</font> </span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">距巷道口位置(米)：</label>
							<div class="controls">
								<input id="position" type="number" maxlength="255" class="input-xlarge required" autocomplete="off"/>
								<span class="help-inline"><font color="red">*</font> </span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">采集孔长度(米)：</label>
							<div class="controls">
								<input id="length" type="number" class="input-xlarge number required" autocomplete="off"/>
								<span class="help-inline"><font color="red">*</font> </span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">角度：</label>
							<div class="controls">
								<input id="angle" type="number" class="input-xlarge digits required" autocomplete="off"/>
								<span class="help-inline"><font color="red">*</font> </span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">方向：</label>
							<div class="controls">
								<select id="direction" class="input-xlarge required">
									<option value="left">左侧</option>
									<option value="right">右侧</option>
									<option value="top">顶部</option>
								</select>
								<span class="help-inline"><font color="red">*</font> </span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">相对距离(米)：</label>
							<div class="controls">
								<input id="displacement" type="number" class="input-xlarge number required" autocomplete="off"/>
								<span class="help-inline"><font color="red">*</font>
							</div>
						</div>
						<div class="control-group hide">
							<label class="control-label">巷道id：</label>
							<div class="controls">
								<input id="roadwayId" maxlength="64" class="input-xlarge hide required" autocomplete="off"/>
								<span class="help-inline"><font color="red">*</font> </span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">备注信息：</label>
							<div class="controls">
								<textarea id="remarks" rows="4" maxlength="255" class="input-xlarge"></textarea>
							</div>
						</div>
					</form>
	            </div>
	            <div class="modal-footer">
	           		<button type="button" class="btn btn-primary" onclick="saveHole()">保存</button>
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	            </div>
	        </div>
	    </div>
	</div>
</body>
</html>